<template>
  <!-- 顶部 手机状态栏 根据用户手机动态设置 高度 -->
  <!-- <status-bar></status-bar> -->

  <!-- 自定义导航栏 -->
  <!-- <nav-bar :title="title" :isLeftButton="true" :organizationList="[]"></nav-bar> -->

  <!-- 搜索栏 -->
  <van-sticky :offset-top="0">
    <view :class="$style.search_bar" class="flex justify-center items-center">
      <van-search :class="$style.search" v-model="searchValue" placeholder="搜索警情" shape="round" @search="alertSearch" @clear="clearSearch"
        @change="searchChange" />
    </view>
  </van-sticky>

  <!-- 搜索历史 -->
  <view :class="$style.search_history" class="flex flex-col">
    <view :class="$style.title">搜索历史</view>
    <view :class="$style.history"></view>
  </view>

  <!-- 搜索警情结果list 展示 -->
  <!-- <view :class="$style.search_result" class="flex">
    <alarm-list-item></alarm-list-item>
  </view> -->

  <scroll-view :class="$style.list" scroll-y="true" class="flex scroll-Y" @scrolltolower="lower">
    <view :class="$style.card_view">
      <block v-for="item in recommendAlertList" :key="item.id">
        <alarm-list-item @change-favorite-state="confirmFavorite" :alertInfo="item" :class="$style.card_item">
        </alarm-list-item>
      </block>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
/**
 * 警情列表 搜索页面
 */
import AlarmListItem from "@/components/alarm-list-item/index.vue";
import { ref } from "vue";
import { queryHistoryAlertList } from "@/api";
import { getLocal } from '@/utils'

const openid: any = getLocal('openid')
let lqryInfo: any = getLocal('lqryInfo')
let recommendAlertList = ref<any>([]);
const searchValue = ref<string>("");
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
let total = ref<number>(0);
// 查询警情列表
function getList() {
  let params: object = {
    cxfl: 0,
    ajms: searchValue.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    zhId: openid,
    yjlddwlxdm: lqryInfo.yjlddwlxdm,
  };
  queryHistoryAlertList(params)
    .then((res: any) => {
      if (pageNo.value == 1) {
        recommendAlertList.value = res.data?.records || [];
      } else {
        recommendAlertList.value = [...recommendAlertList.value, ...res.data?.records || []];
      }
      total.value = res.data?.total
      console.log('chancel', 'index', '61行', recommendAlertList.value);
    })
    .catch((e: any) => {
      console.log(e);
    });
}


/**
 * 警情搜索
 */
function alertSearch(value: any) {
  searchValue.value = value.detail
  console.log('chancel', 'index', '39行', value);
  getList();
}

// 瀑布流
function lower() {
  if (pageNo.value * pageSize.value < total.value) {
    pageNo.value++;
    getList();
  }
}

/**
 * 搜索框输入字符开始变化
 */
function searchChange() { }

/**
 * 收藏 和 取消收藏警情
 */
function confirmFavorite(id: number) {
  console.log(id);
  getList()

}

// 清除搜索框
function clearSearch(){
  searchValue.value = ""
  recommendAlertList.value = []
}
</script>

<style lang="less" module>
.status {
  background-color: #385add;
}

.search_bar {
  width: 100%;
  height: 144rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);

  .search {
    width: 100%;

    .van-search__content {
      background: #f5f6f8;
    }
  }
}

.search_history {
  margin: 30rpx 0 0 40rpx;

  .title {
    font-size: 32rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #375ce4;
  }
}

.search_result {
  margin-top: 20rpx;
  padding: 10rpx 20rpx;
}


.list {
  height: 1000rpx;
  // width: 100%;
  // column-count: 2;
  // column-gap: 10rpx;
  // column-width: 100%;

  // display: flex;
  // flex-direction: row;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // margin-top: 20rpx;
  padding: 20rpx 10rpx 0 10rpx;
  box-sizing: border-box;

}

.card_view {
  column-count: 2;
  column-gap: 10rpx;
  width: 100%;
}

.card_item {
  box-sizing: border-box;
  break-inside: avoid;
}
</style>
